<template>
	<div class="specifwarper" @click="changespecif">
		<div class="specifcontent" @click.stop.prevent="">
			<img class="xdisnone" src="../../../static/images/x.png" @click="changespecif"/>
		<h4 class="typename">{{foodspecif.listName}}</h4>
		<split></split>
		<p>规格：</p>
		<ul>
			<li v-for="(item,index) in foodspecif.listin" :class="{focus:index==i}" @click.stop.prevent="changeinfo(index)">
				{{item.listName}}
			</li>
		</ul>
		<!--<p v-if="foodspecif.ogndishestasteList.length>0">口味：</p>
		<ul>
			<li v-for="(item,index) in foodspecif.ogndishestasteList" :class="{focus:index==t}" @click="chosetaste(index)">
				{{item.taste.tastename+item.chosed}}
			</li>
		</ul>
		<div v-if="foodspecif.ogndishestasteList.length>0" class="split"></div>
		<p v-if="foodspecif.ogndishesavoList.length>0">忌口：</p>
		<ul>
			<li v-for="(item,index) in foodspecif.ogndishesavoList" :class="{focus:item.chosed}" @click="choseavo(index)">
				{{item.avo.avoname+item.chosed}}
			</li>
		</ul>-->
		<div class="typebottom">
			<span>￥{{specifiinfo.price}}</span><span>{{specifiinfo.listName}}</span>
			<div class="cartwraper">
			<change :food="specifiinfo"></change>
			</div>
		</div>
		<split></split>
		</div>
	</div>
</template>

<script>
	import change from '../shopcart/change'
	import split from '../shopcart/split'
	export default{
		data(){
			return {
				i:0,
				t:0
			}
		},
		props:["foodspecif"],
		computed:{
			specifiinfo:function(){
//				console.log(this.foodspecif.ogndishespriceList[this.i])
//				this.foodspecif.ogndishespriceList[this.i].which=this.i
				return this.foodspecif.listin[this.i]
			}
//			taste:function(){
//				return this.specifiinfo.taste
//			},
//			avo:function(){
//				return this.specifiinfo.avo
//			}
		},
		methods:{
			changeinfo:function(index){
				this.i=index;
//				this.foodspecif.ogndishespriceList.forEach(function(guige){
//					guige.chosed=false
//				})
//				this.foodspecif.ogndishespriceList[index].chosed=true
			},
			changespecif:function(){
				this.$emit('changespecif');
			}
//			chosetaste:function(index){
//				this.t=index;
//				this.foodspecif.ogndishestasteList.forEach(function(taste){
//					taste.chosed=false
//				})
//				this.foodspecif.ogndishestasteList[index].chosed=true
//			
//			},
//			choseavo:function(index){
//      	this.foodspecif.ogndishesavoList[index].chosed=!this.foodspecif.ogndishesavoList[index].chosed
//			},
//			inavo:function(index,arry){
//				console.log("触发")
//				if(arry){
//					var flag1=1
//				arry.forEach(function(item){
//					console.log("循环")
//					if(item==index){
//						flag1=false
//						console.log("chenghgong")
//						return true
//						alert("true")
//					}
//				})
//				if(flag1){
//					return false
//				}
//				else{
//					return true
//				}
//				}
//			}
		},
		components:{
			change,
			split
		}
		
	}
</script>

<style lang="stylus" scoped="scoped">
  .specifwarper
    background rgba(0,0,0,0.5)
    position fixed
    border-radius 5px
    width 100%
    height 200%
    left 0
    top 0
    z-index 200
  	.specifcontent
	  padding 0.3rem 0 0 0 
	  position relative
	  width 7.5rem
	  background white
	  box-sizing border-box
	  border-bottom-left-radius 0.1rem
	  border-bottom-right-radius 0.1rem 
	  .xdisnone
	    display block
	    height 0.5rem
	    width 0.5rem
	    top 0.1rem
	    z-index 10
	    right 0.1rem
	    position absolute
	  .typebottom
	  	width 100%
	  	padding 0 0.3rem
	  	overflow auto
	  	height 1.2rem
	  	margin-top 0.2rem
	  	box-sizing border-box
	  	.cartwraper
        height 100%
        z-index 20
        line-height 1rem
        float right
	  	span
	  	  color red
	  	  background white
	  	  display block
	  	  float left
	  	  font-size 0.4rem
	  	  height 100%
	  	  line-height 1rem
	  	  margin-left 0.2rem
	  	  &:nth-child(2)
	  	    color black
	  	    font-size 0.3rem
	  	    line-height 1rem 
	  h4
	    width 100%
	    height 0.5rem
	    margin-top 0.2rem
	    text-align center
	    color rgba(0,0,0,0.9)
	    background white	
	    font-size 0.35rem
	  p
	    font-weight 700
	    padding 0 0.3rem
	    font-size 0.3rem
	    height 0.3rem
	    line-height 0.3rem
	    margin-top 0.2rem 
	    text-align left
	  ul
	    background white
	    padding 0.1rem 0.3rem
	    margin-top 0.15rem
	    overflow auto
	    overflow hidden
	    overflow auto 
	    li,
	      background white
	      border 1px solid white
	      padding 0 0.1rem
	      line-height 0.6rem
	      transition background 0.5s
	      min-width 1.4rem
	      color black
	      margin-left 0.2rem
	      font-size 0.3rem
	      border-radius 0.1rem 
	      float left
	      text-align center
	      height 0.6rem
	    li.focus
	      border 1px solid pink
	      background rgba(255,0,94,0.1)
</style>